$(()=>{
    let $main = $("#main");
    let $title = $("#title");
    let $table = $("#table");
    let $tableMain = $("#tableMain");
    let $notChoose = $("#notChoose");
    /* Btn */
    let $basic = $("#basicBtn");
    let $info = $("#infoBtn");
    let $bind = $("#bindBtn");
    let $permission = $("#permissionBtn");
    let $logout = $("#logoutBtn");
    changeForm("");
    $basic.click(()=>{
        location.href="#basic";
        changeForm("basic");
    });
    $info.click(()=>{
        location.href="#info";
        changeForm("info");
    });
    $bind.click(()=>{
        location.href="#bind";
        changeForm("bind");
    });
    $permission.click(()=>{
        location.href="#permission";
        changeForm("permission");
    });
    $logout.click(()=>{
        location.href="{LINK_logout}";
    });
    function changeForm(action){
        
        $basic.addClass("btn-flat");
        $info.addClass("btn-flat");
        $bind.addClass("btn-flat");
        $permission.addClass("btn-flat");
        
        $table.addClass("el-loading");
        $notChoose.hide();
        let x;
        if(action=="basic"||location.href.indexOf("basic")>=0){
            $(`#basicBtn`).removeClass("btn-flat");
            $title.text($(`#basicBtn`).text()+"：");
            getBasic();
            x=` 
                <tr>
                    <th>用户ID</th>
                    <td colspan="2" id="item1">加载中</td>
                </tr>
                <tr>
                    <th>用户名</th>
                    <td colspan="2" id="item2">加载中</td>
                </tr>
                <tr>
                    <th>密码</th>
                    <td id="item3">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" href="{LINK_user/basic/password}">修改密码</a></td>
                </tr>
                <tr>
                    <th>邮箱</th>
                    <td id="item4">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" href="{LINK_user/basic/email}">修改邮箱</a></td>
                </tr>
                <tr>
                    <th>注册日期</th>
                    <td colspan="2" id="item5">加载中</td>
                </tr>
            `;
        }else if(action=="info"||location.href.indexOf("info")>=0){
            $(`#infoBtn`).removeClass("btn-flat");
            $title.text($(`#infoBtn`).text()+"：");
            getInfo();
            x=`
                <tr>
                    <th>头像</th>
                    <td><img id="item1" src="{IMG_avatar_jpg}" alt="头像" width="100" style="border-radius: 50px;"></td>
                    <td><a class="btn waves-button waves-effect waves-light" href="{LINK_user/info/avatar}">更换头像</a></td>
                </tr>
                <tr>
                    <th>用户ID</th>
                    <td colspan="2" id="item2">加载中</td>
                </tr>
                <tr>
                    <th>用户名</th>
                    <td colspan="2" id="item3">加载中</td>
                </tr>
                <tr>
                    <th>昵称</th>
                    <td id="item4">加载中</td>
                    <td><a class="btn waves-effect waves-button waves-light" href="{LINK_user/info/nickname}">修改昵称</a></td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td id="item5">加载中</td>
                    <td><a class="btn waves-effect waves-button waves-light" href="{LINK_user/info/gender}">修改性别</a></td>
                </tr>
                <tr>
                    <th>年龄</th>
                    <td id="item6">加载中</td>
                    <td><a class="btn waves-effect waves-button waves-light" href="{LINK_user/info/age}">修改年龄</a></td>
                </tr>
                <tr>
                    <th>个人介绍</th>
                    <td id="item7">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" href="{LINK_user/info/description}">修改介绍</a></td>
                </tr>
            `;
        }else if(action=="bind"||location.href.indexOf("bind")>=0){
            $(`#bindBtn`).removeClass("btn-flat");
            $title.text($(`#bindBtn`).text()+"：");
            getBind();
            x=`
                <tr>
                    <th>用户ID</th>
                    <td colspan="2" id="item1">加载中</td>
                </tr>
                <tr>
                    <th>用户名</th>
                    <td colspan="2" id="item2">加载中</td>
                </tr>
                <tr>
                    <th>IURT账号</th>
                    <td id="item3">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" id="btn3" href="javascript:dialog('提示','经过我们的长期努力，最终我们取消了这个功能。');">加载中</a></td>
                </tr>
                <tr>
                    <th>GitHub账号</th>
                    <td id="item4">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" id="btn4" href="javascript:dialog('提示','经过我们的长期努力，最终我们取消了这个功能。');">加载中</a></td>
                </tr>
                <tr>
                    <th>QQ</th>
                    <td id="item5">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" id="btn5" href="javascript:dialog('提示','经过我们的长期努力，最终我们取消了这个功能。');">加载中</a></td>
                </tr>
                <!--tr>
                    <th>微博账号</th>
                    <td id="item6">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" id="btn6">加载中</a></td>
                </tr-->
                <!--tr>
                    <th>百度账号</th>
                    <td id="item7">加载中</td>
                    <td><a class="btn waves-button waves-effect waves-light" id="btn7">加载中</a></td>
                </tr-->
            `;
        }else if(action=="permission"||location.href.indexOf("permission")>=0){
            $(`#permissionBtn`).removeClass("btn-flat");
            $title.text($(`#permissionBtn`).text()+"：");
            getPermission();
            x=`
                <tr>
                    <th>用户ID</th>
                    <td id="item1">加载中</td>
                </tr>
                <tr>
                    <th>用户名</th>
                    <td id="item2">加载中</td>
                </tr>
                <tr>
                    <th>用户权限</th>
                    <td id="item3">加载中</td>
                </tr>
            `;
        }else{
            $notChoose.show();
            return;
        }
        $tableMain.html(x);
        loadColor();
        $table.fadeIn();
    }
    function getBasic() {
        $.post("{LINK_user/getInfo/basic}",{},text=>{
            $table.removeClass("el-loading");
            let data = JSON.parse(text);
            if(data.status){
                $("#item1").text(data.id);
                $("#item2").text(data.username);
                $("#item3").text("******");
                $("#item4").text(data.email);
                $("#item5").text(data.time);
            }else{
                dialog("错误","数据读取失败："+data.msg);
            }
        });
    }
    function getInfo(){
        $.post("{LINK_user/getInfo/info}",{},text=>{
            $table.removeClass("el-loading");
            let data = JSON.parse(text);
            if(data.status){
                $("#item1").attr("src",data.avatar);
                $("#item2").text(data.id);
                $("#item3").text(data.username);
                $("#item4").text(data.nickname);
                $("#item5").text(data.gender);
                $("#item6").text(data.age);
                $("#item7").text(data.description);
            }else{
                dialog("错误","数据读取失败："+data.msg);
            }
        });
    }
    function getBind(){
        $.post("{LINK_user/getInfo/bind}",{},text=>{
            $table.removeClass("el-loading");
            let data = JSON.parse(text);
            if(data.status){
                $("#item1").text(data.id);
                $("#item2").text(data.username);
                if(data.iurt=="no"){
                    $("#item3").text("未绑定");
                    $("#btn3").text("绑定");
                }else{
                    $("#item3").text(data.iurt);
                    $("#btn3").text("解绑");
                }
                if(data.github=="no"){
                    $("#item4").text("未绑定");
                    $("#btn4").text("绑定");
                }else{
                    $("#item4").text(data.github);
                    $("#btn4").text("解绑");
                }
                if(data.qq=="no"){
                    $("#item5").text("未绑定");
                    $("#btn5").text("绑定");
                }else{
                    $("#item5").text(data.qq_name);
                    $("#btn5").text("解绑");
                }
                // if(data.weibo=="no"){
                //     $("#item6").text("未绑定");
                //     $("#btn6").text("绑定");
                // }else{
                //     $("#item6").text(data.weibo);
                //     $("#btn6").text("解绑");
                // }
                // if(data.baidu=="no"){
                //     $("#item7").text("未绑定");
                //     $("#btn7").text("绑定");
                // }else{
                //     $("#item7").text(data.baidu);
                //     $("#btn7").text("解绑");
                // }
            }else{
                dialog("错误","数据读取失败："+data.msg);
            }
        });
    }
    function getPermission() {
        $.post("{LINK_user/getInfo/permission}",{},text=>{
            $table.removeClass("el-loading");
            let data = JSON.parse(text);
            if(data.status){
                $("#item1").text(data.id);
                $("#item2").text(data.username);
                $("#item3").text(data.permission);
            }else{
                dialog("错误","数据读取失败："+data.msg);
            }
        });
    }
});